<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
    <script src="../libs/dat.gui.min.js" type="text/javascript"></script>
    <link href="../css/dat-gui-light-style.css" rel="stylesheet"/>
    <style>
        #myNavCubeCanvas {
            position: absolute;
            width: 250px;
            height: 250px;
            bottom: 100px;
            left: 50px;
            z-index: 200000;
        }
    </style>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<canvas id="myNavCubeCanvas"></canvas>
<div class="slideout-sidebar">
    <img class="info-icon" src="../../assets/images/i1n8_icon.png"/>
    <h1>NavCubePlugin Localization</h1>
    <h2>Navigation helper with localized labels</h2>
    <p>NavCubePlugin creates a navigational helper that allows us easily jump the camera to axis-aligned views of our
        scene. </p>
    <p>In this example, we're configuring our Viewer with a LocaleService, which allows us to dynamically switch our
        NavCube's labels between different languages.</p>
    <h3>Select a Locale</h3>
    <p>Select a locale and watch the NavCube labels change:</p>
    <div id="myDatGuiContainer"></div>
    <h3>Components Used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/localization/LocaleService.js~LocaleService.html"
               target="_other">LocaleService</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
               target="_other">XKTLoaderPlugin</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/NavCubePlugin/NavCubePlugin.js~NavCubePlugin.html"
               target="_other">NavCubePlugin</a>
        </li>
    </ul>
    <h3>Resources</h3>
    <ul>
        <li>
            <a href="http://openifcmodel.cs.auckland.ac.nz/Model/Details/274"
               target="_other">Model source</a>
        </li>
    </ul>
</div>
</body>
<script type="module">

    import {
        Viewer,
        LocaleService,
        XKTLoaderPlugin,
        NavCubePlugin
    } from "../../dist/xeokit-sdk.min.es.js";

    // Create a Viewer, configured with an i18n-based locale service, which performs dynamic locale-specific
    // string translations for the Viewer and plugins.

    const viewer = new Viewer({

        canvasId: "myCanvas",

        localeService: new LocaleService({
            messages: {
                "en": { // English
                    "NavCube": {
                        "front": "Front",
                        "back": "Back",
                        "top": "Top",
                        "bottom": "Bottom",
                        "left": "Left",
                        "right": "Right"
                    }
                },
                "mi": { // Māori
                    "NavCube": {
                        "front": "Mua",
                        "back": "Tuarā",
                        "top": "Runga",
                        "bottom": "Raro",
                        "left": "Mauī",
                        "right": "Tika"
                    }
                },
                "fr": { // Francais
                    "NavCube": {
                        "front": "Avant",
                        "back": "Arrière",
                        "top": "Supérieur",
                        "bottom": "Inférieur",
                        "left": "Gauche",
                        "right": "Droit"
                    }
                },
                "jp": { // Japanese
                    "NavCube": {
                        "front": "前部",
                        "back": "裏",
                        "top": "上",
                        "bottom": "底",
                        "left": "左",
                        "right": "右"
                    }
                }
            },
            locale: "en"
        })
    });

    // We can now dynamically switch our Viewer between locales at any time, eg:

    viewer.localeService.locale = "jp";

    // Arrange the camera

    viewer.camera.eye = [-3.933, 2.855, 27.018];
    viewer.camera.look = [4.400, 3.724, 8.899];
    viewer.camera.up = [-0.018, 0.999, 0.039];

    // Create a NavCube

    new NavCubePlugin(viewer, {
        canvasId: "myNavCubeCanvas",
        color: "lightblue",
        visible: true,           // Initially visible (default)
        size: 250,               // NavCube size in pixels (default is 200)
        cameraFly: true,       // Fly camera to each selected axis/diagonal
        cameraFitFOV: 45,        // How much field-of-view the scene takes once camera has fitted it to view
        cameraFlyDuration: 0.5 // How long (in seconds) camera takes to fly to each new axis/diagonal
    });

    // Load a model

    const xktLoader = new XKTLoaderPlugin(viewer);

    const sceneModel = xktLoader.load({
        id: "myModel",
        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
        edges: true
    });

    //------------------------------------------------------------------------------------------------------------------
    // GUI to switch between locales
    //------------------------------------------------------------------------------------------------------------------

    const guiParams = new function () {
        this["Current Locale"] = viewer.localeService.locale;
    }();

    const update = function () {
        viewer.localeService.locale = guiParams["Current Locale"];
        requestAnimationFrame(update);
    };

    update();

    const gui = new dat.GUI({autoPlace: false, width: "100%"});

    const localizationFolder = gui.addFolder('Localization');
    localizationFolder.add(guiParams, "Current Locale", viewer.localeService.locales);
    localizationFolder.open();

    const customContainer = document.getElementById('myDatGuiContainer');
    customContainer.appendChild(gui.domElement);

    window.viewer = viewer;

</script>
</html>